<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            display: none;
        }
    </style>
</head>
<body>
   <div class="a">
       <span class="colse">X</span>
       <p>
           <span class="time">10</span>秒之后关闭
       </p>
   </div> 


   <script>
       const oA=document.querySelector('.a');
       const oClose=document.querySelector('.colse');
       console.log(oClose);
       const oTime=document.querySelector('.time');

       function  fn(){
           let t1=setTimeout(function(){
               oA.style.display='block';



               oClose.onclick=function(){
                oA.style.display='none';

                oTime.innerHTML=10;
                clearInterval(t);
                fn()
               }


               let t=setInterval(function(){
                   oTime.innerHTML--;
                   if(oTime.innerHTML==0){
                    oA.style.display='none';

                    oTime.innerHTML=10;
                    clearInterval(t);
                    fn()
                   }
               },1000)
           },3000)
       }


       fn()
   </script>
</body>
</html>